Research Methods Experiment: HyLiMo

Thank you for participating in our study comparing diagramming tools.

This experiment aims to compare the diagram modeling tool HyLiMo with the diagramming tool draw.io
Your task is to get familliar with HyLiMo and draw.io and complete a task for HyLiMo and another task for draw.io.

Please follow the following instructions step by step.
Only read the secions of the document you are explicitely asked to.

Step 1

Read the short UML class diagram instruction found below.
If you are already familiar with UML class diagrams, you might skip this step

Step 2

Carefully read the instructions for both HyLiMo and draw.io found below.

Step 3

Because the order of tools needs to be random please flip a coin, if it shows heads (german: “Kopf”) start with draw.io for Task 1.

Step 4

Carefully read Task 1. When your are ready, start and track your time you take for this task. Please don’t take any breaks while working on it.
When you are finished with the task, note down how much time you took (in seconds), and download the created diagram (for detailed export instructions, see after Step 8).

Step 5

Repeat Step 4 with Task 2 (and the other tool).

Step 6

Create a (random) identifier.

Step 7

Please complete our survey regarding your experience with both tools.
You can find the survey here: https://forms.office.com/e/N4qWdVyxcb

Step 8

Rename your downloaded diagrams to [UID]-[tool].[old_file_ending] and upload both diagrams here: https://www.dropbox.com/request/gQPBFa3oLLBFyBX2qPsn
While Dropbox requires you to provide a name and e-mail address, you don’t need to enter your real name and e-mail address (e.g. test and test@example.com).

Detailed Export Instructions

• HyLiMo: You can download the diagram using the download button in the top right corner. Download the diagram in any of the supported formats (preferrably svg or pdf).
• draw.io: You can download the diagrams using the File -> Export as menu entry. Download the diagram in any of the supported formats (preferrably svg or pdf)

UML Class Diagram Introduction

UML class diagrams are visual representations of the structure of a system, showing its classes, attributes, methods, and the relationships between them. They are used to model the static design of a system, making it easier to understand, plan, and communicate its architecture. Class diagrams are commonly employed in software development to illustrate how different components interact and to serve as a blueprint during the design and implementation phases.

In the context of this, the following features are relevant:

• Class
  • Consists of name, properties and methods
  • 
  • properties consist of a visibility, name and type
    • Example: +test : int
  • methods consist of a visibility, name, parameter list, and return type
    • Example: +sqrt(value: double): double
• Associations
  • Represent a relation between two classes
  • 
  • Consist ofrole names and multiplicities
  • Role names in UML associations specify the purpose or function of one class in relation to the other and are placed near the ends of the association lines, adjacent to the classes they describe.
  • Multiplicities define the number of instances of one class that can be associated with a single instance of another class and are shown as numerical ranges near the ends of the association lines.
  • Common multiplicities
    • 0…1: optinal
    • 1: exactly one
    • 0…*: many
    • 1…*: at least one

Introduction of Tools

HyLiMo

HyLiMo is a hybrid live-synchronized modular diagramming editor.
Diagrams can be edited both textually, using a diagram DSL, and graphically, using the graphical editor, with both views being live synchronized.

Recommended editor: https://hylimo.github.io

Complete documentation: https://hylimo.github.io/docs

• Class diagrams always start with classDiagram

  classDiagram {
      class("Example")
  }
  

• Defining a class

  • Textually

    class("Example")
    

  • Graphically
    Click or drag and drop one of the example classes from the toolbox

• Position a class

  • Textually: add a layout scope to a class definition and declare a pos

    class("Example") layout {
        pos = apos(100, 200)
    }
    

    • apos(x, y): absolute position
    • rpos(target, x, y): position relative to a target
  • Graphically: drag the class to the desired position

• Class properties/methods

  • Textually: using a DSL

    class("Example") {
        public {
            test : int
            sqrt(value : double) : double
        }
    }
    

    • types are always optional
    • to use names with spaces/special characters, names can be put in quotes
    • visibilities
      • public
      • private
      • protected
      • internal
      • default: no visibility symbol

• Create associations

  • Textually: using a connection operator

    House --> Window
    

    • Other operators
      • -- (undirected)
      • <--> (bidirectional)
      • mirrored operators are always supported
  • Graphically
    1. Select the desired type of association from the toolbox
    2. Hold shift and hover over the start class
    3. Click and drag the appearing arrow on the outline to the target class

• Add labels (e.g. role/multiplicity) to an association

  • Textually: using the label function in a with scope

    House --> Window with {
        label("0..*", 0, 10)
    }
    

    • Syntax: label([name], [position on the association], [distance to the association])
    • Recommended: position the label by dragging it to the correct position

• Layout an association

  • Graphically
    • Select an association
    • To move the start/end of the association, drag the point to the desired location on the outline of the start/target class
    • To move a segment of the axis-aligned path, drag the segment
    • To create a new intermediate point, shift-click the association where the point should be created
      • The created point can than be dragged to the desired location
  • Textually: using over property in a with scope

    House --> Window with {
        over = start(Position.Left).axisAligned(0.5, apos(10, 10), -0.5, end(Position.Right))
    }
    

    • start: defines the start position on the outline of the start class
    • end: defines the end position on the outline of the end class
    • axisAligned: path of the connection, consisting of any amount of axis-aligned segment
      • a segment consists of two entries
      • first a number between -1 and 1
      • an intermediate/end point

draw.io (diagrams.net)

draw.io is a graphical diagramming tool.

Recommended editor: https://app.diagrams.net

• Add a class
  • on the left side, there is a collection if diagram elements to add
  • the UML section provides several example classes
• Add class properties/methods
  • This depends on the chosen class element
  • If the class does not have a minimize button (-)
    1. Double click the properties or methods section
    2. Add the next property by inserting a line break
    3. If necessary: resize the class so that all properties/methods are still visible
  • If the class has a minimize button (-)
    1. Either select an existing property/method and copy-paste it or insert a new attribute from the toolbar on the left side
    2. Drag the new property/method over the class where it should be inserted
    • This can also be used to reorder properties/methods
    • The property/method can be edited by double-clicking it
• Edit a property/method
  • double click the property / method to edit the text
  • Examples
    • + example : int
    • - sqrt(value : double) : double
  • visibilities
    • +: public
    • #: protected
    • ~: package/internal
    • -: private
• Create an association
  • Option 1: Toolbar
    1. Drag an association from the toolbar on the left side into the canvas
    2. Drag the start/end of the association to the start/end
  • Option 2: Start at class
    1. Hover over a class
    2. An arrow appears, create a connection by dragging the clicking and dragging the arrow to the target class
    3. In the sidebar on the right side, select the correct arrows for the start/end of the association
• Add labels (e.g. role/multiplicity) to an association
  • Double-click the association where a text field should be inserted
• Layout an association
  • The style of the selected association (axis-aligned, direct line, curve, …) can be selected in the sidebar on the right side
  • Depending on the selected style, the path can be changed by dragging points/segments of the connection

Task 1: Online Store

Create a class diagram, with the random tool, for a simple online store:

• A Store class with storeId: int and name: string
• A Customer class withcustomerID: int, name: string, and email: string.
• A Product class with productID: int, name: string, and price: double.
• An Order class that connects customers with their purchased products and has the attributes orderID: int, orderDate: date, and totalPrice: int.
• Each order can include multiple products, and each product can appear in multiple orders.
• Each customer can order any amount of order, and each order is ordered by one customer
• Each store can have multiple customers/products, and each customer/product can be in multiple stores
• ID Attributes are private, all other attributes are public

Task 2: School Management System

Design a class diagram, with the other tool, for a school management system:

• A School class with schoolID: int, name: string, and address: string.
• A Student class with attributes studentID: int, name: string, and grade: int.
• A Teacher class with attributes teacherID: int, name: string, and subject: string.
• A Class class with following attributes: classID: int and roomNumber: int.
• Each teacher can teach multiple classes, but each class is taught by only one teacher.
• Each class can have multiple students and each student can be in multiple classes.
• Each school can have multiple teachers/students, and each teacher/student is at one school
• ID Attributes are private, all other attributes are public